<template>
  <m-win wd="950" v-model:window_open="val.md_team" title="相关队伍数据">
    <template #content>
      <div style="min-height: 100vh" class="_mbbox boxgap">
        <div class="nbox1">
          <van-loading vertical v-if="val.loading2 == true" style="margin-top: 16px">
            <template #icon>
              <van-icon name="star-o" size="30" />
            </template>
            Loading...
          </van-loading>
          <div class="__dxgap">
            <template v-for="(item, key) in val.teamdata">
              <div class="__dxbox">
                <div style="width: 100%">
                  <div class="title_font">{{ item.boss_name }}</div>
                </div>
                <div class="_rolelist">
                  <template v-for="item2 in item.icon?.split(',')">
                    <div class="roleava2 avacss1">
                      <img class="_img1" :src="cfg.function.ava(item2)" />
                    </div>
                  </template>
                </div>
                <n-grid class="ngrid" :cols="2" y-gap="8">
                  <n-gi>
                    <n-statistic label="普通模式">
                      <div>
                        {{ item.nofever_maxdmg?.toLocaleString() }}
                      </div>
                    </n-statistic>
                  </n-gi>
                  <n-gi>
                    <n-statistic label="炽热模式">
                      <div>
                        {{ item.fever_maxdmg?.toLocaleString() }}
                      </div>
                    </n-statistic>
                  </n-gi>
                </n-grid>
              </div>
            </template>
          </div>
        </div>
      </div>
    </template>
  </m-win>

  <van-dialog
    v-model:show="val.md_jump"
    closeOnClickOverlay
    teleport="body"
    @confirm="set.jump"
  >
    <div class="vandialogbg">
      <van-cell-group inset>
        <van-field center v-model="val.jumptext" type="digit" label="页数" />
      </van-cell-group>
    </div>
  </van-dialog>
  <div class="_mbbox2 drk_div">
    <div class="nbox1 select_gap">
      <div class="__sldfbig">
        <n-select
          :options="sval.season_list"
          :value="sval.season_click"
          placeholder="筛选赛季"
          @update:value="set.sl_click"
        />
      </div>
      <div class="__sldf">
        <n-select
          :options="val.boss_list"
          placeholder="筛选首领"
          v-model:value="val.ckboss"
          @change="set.get_data()"
        />
      </div>
      <div class="__sldf">
        <template v-if="val.sort == 'fever'">
          <n-button
            size="small"
            @click="
              val.sort = 'nofever';
              set.sort();
            "
            type="gt_n"
          >
            <n-icon size="18" :component="ArrowSwap20Filled" />纯炽热数据</n-button
          >
        </template>
        <template v-else-if="val.sort == 'nofever'">
          <n-button
            size="small"
            @click="
              val.sort = null;
              set.sort();
            "
            type="gt_w"
          >
            <n-icon size="18" :component="ArrowSwap20Filled" />无炽热数据</n-button
          >
        </template>
        <template v-else>
          <n-button
            strong
            secondary
            size="small"
            @click="
              val.sort = 'fever';
              set.sort();
            "
          >
            <n-icon size="18" :component="ArrowSwap20Filled" />全出刀数据</n-button
          >
        </template>
      </div>
    </div>
    <div class="nbox1">
      <van-loading vertical v-if="val.loading == true" style="margin-top: 16px">
        <template #icon>
          <van-icon name="star-o" size="30" />
        </template>
        Loading...
      </van-loading>
      <div class="ranking_gap">
        <div class="ranking_box" v-for="(item, key) in val.data">
          <div class="ranking_hover">
            <n-button
              size="tiny"
              type="gt_y"
              @click="set.seateam(sval.season_click, item.icon)"
              >相关队伍</n-button
            >
          </div>
          <div class="_rolelist">
            <div class="roleava avacss1">
              <img class="_img1" :src="cfg.function.ava(item.icon)" />
            </div>
          </div>
          <n-grid class="ngrid" :cols="1" y-gap="8">
            <n-gi>
              <n-statistic>
                <div class="__font" v-if="val.sort == null">
                  {{ item.count }}次 ({{ item.bfb }}%)
                </div>
                <div class="__font" v-else-if="val.sort == 'fever'">
                  {{ item.fever_count }}次 ({{ item.fever_bfb }}%)
                </div>
                <div class="__font" v-else-if="val.sort == 'nofever'">
                  {{ item.nofever_count }}次 ({{ item.nofever_bfb }}%)
                </div>
              </n-statistic>
            </n-gi>
          </n-grid>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="css" scoped>
._rolelist {
  display: flex;
  gap: 1em;
  align-items: center;
}
.__dxgap {
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75em;
}
.__dxbox {
  cursor: pointer;
  display: flex;
  padding: 0.5em;
  border-radius: 0.25em;
  position: relative;
  background: var(--nbox2-bg);
  align-items: center;
  gap: 0.5em;
  height: 100%;
  flex-direction: column;
}
.roleava {
  width: 2.8em;
  height: 2.8em;
  position: relative;
}
.roleava2 {
  width: 2.5em;
  height: 2.5em;
  position: relative;
}
.__font {
  color: rgba(255, 255, 255, 0.52);
  font-size: 0.9em;
}

.roleava ._img1,
.roleava2 ._img1 {
  width: 100%;
  height: 100%;
}

.ranking_gap {
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}
.title_font {
  font-size: 1.1em;
  color: var(--base-font-hover-color);
  text-shadow: 0 0 3px #000;
  text-align: center;
  margin-top: 0;
}

@media (max-width: 428px) {
  .__dxgap {
    grid-template-columns: repeat(2, 1fr);
  }
  .ranking_gap {
    grid-template-columns: repeat(3, 1fr);
  }
  ._rolelist {
    gap: 1.8vw;
  }
  .roleava {
    width: 8.5vw;
    outline: solid 0.5vw #8d8072;
    height: 8.5vw;
  }
  .roleava2 {
    width: 7.5vw;
    outline: solid 0.5vw #8d8072;
    height: 7.5vw;
  }
  .ranking_box .ngrid div {
    grid-column: span 1 !important;
  }
}
</style>
<script>
import { ArrowSwap20Filled } from "@vicons/fluent";
import { cfg } from "@/cfg/cfg.js";
import { set } from "lodash";
import { getrole, getbossv2 } from "@/cfg/function.js";

export default {
  props: {
    tjval: {
      type: Object,
      required: false,
    },
  },
  setup(props) {
    const sval = props.tjval;
    const set = {
      seateam: async (season, icon) => {
        try {
          val.md_team = true;
          val.loading2 = true;
          const back = await cfg.mget({
            url: `${cfg.url2}api/tj`,
            query: {
              type: "get_iconteam",
              season: season,
              icon: icon,
            },
          });
          if (back.code == 0) {
            val.teamdata = back.data;
            val.loading2 = false;
          } else {
            throw { code: -1, message: back.msg };
          }
        } catch (error) {
          val.loading2 = false;
          cfg.alert3({
            message: `${error.message}`,
          });
        }
      },
      tabhand: async (back, hand, page) => {
        val.loading = true;
        val.dateck = back;
        val.data = [];
        if (page == null) {
          val.page = 1;
        }
        cfg.router.replace({
          path: `/gt/tj-grk/${back}`,
          query: {
            p: val.page,
          },
        });
        await set.get_data();
      },
      sort: () => {
        const sort = val.sort;
        const result = val.data;
        if (sort == "fever") {
          result.sort((a, b) => b.fever_count - a.fever_count);
        } else {
          if (sort == "nofever") {
            result.sort((a, b) => b.nofever_count - a.nofever_count);
          } else {
            result.sort((a, b) => b.count - a.count);
          }
        }
      },
      sl_click: async (sid) => {
        if (sid <= 2012) {
          cfg.alert3({
            message: `只允许查看2025-10-03之后的赛季数据`,
          });
          return;
        }
        sval.season_click = sid;
        val.page = 1;

        await set.get_season_boss();
        await set.get_data();
      },
      get_season_boss: async () => {
        try {
          const back = await cfg.mget({
            url: `${cfg.url2}api/season`,
            query: {
              type: "get_boss_info",
              season: sval.season_click,
            },
          });

          if (back.code == 0) {
            val.boss_list = [
              {
                value: null,
                label: "清空",
              },
            ];
            const data = back.data.info;
            for (let index = 0; index < data.length; index++) {
              const item = data[index];
              val.boss_list.push({
                value: item.boss_name,
                label: `〔${item.et}〕${item.boss_name}`,
              });
            }
          } else {
            throw { code: -1, message: back.msg };
          }
        } catch (error) {
          cfg.alert3({
            message: `${error.message}`,
            closeOnClickOverlay: true,
          });
        }
      },
      get_data: async (type) => {
        nextTick(async () => {
          try {
            const back = await cfg.mget({
              url: `${cfg.url2}api/tj`,
              query: {
                type: "get_roletj",
                boss: val.ckboss,
                sort: val.sort,
                season: sval.season_click,
              },
            });
            if (back.code == 0) {
              val.loading = false;
              val.data = back.data;
            } else {
              throw { code: -1, message: back.msg };
            }
          } catch (e) {
            val.loading = false;
            cfg.alert3({
              message: e.message,
            });
          }
        });
      },
    };
    const val = reactive({
      page: 1,
      data: [],
      boss: [],
      boss_list: [],
    });

    onMounted(async () => {
      val.loading = true;
      await getrole();
      await set.get_season_boss();
      set.get_data();
    });
    return { sval, cfg, set, val, ArrowSwap20Filled };
  },
};
</script>
